import type {VNode} from "vue";
import {defineComponent, Transition} from "vue";
import {RouterView} from "vue-router";
import {dateZhCN, NConfigProvider, zhCN} from "naive-ui";
import {storeToRefs} from "pinia";
import {useThemeStore} from "@/stores";
import NaiveProvider from "@components/common/NaiveProvider";

/**
 * App 组件
 */
export default defineComponent({
  name: "App",
  setup() {
    const themeStore = useThemeStore();
    const { naiveTheme, naiveThemeOverrides } = storeToRefs(themeStore);
    return () => (
      <NConfigProvider
        locale={zhCN}
        dateLocale={dateZhCN}
        theme={naiveTheme.value}
        themeOverrides={naiveThemeOverrides.value}
        preflightStyleDisabled={true}
      >
        <NaiveProvider>
          <RouterView
            v-slots={{
              default: ({ Component }: { Component: VNode }) => {
                if (Component)
                  return (
                    <Transition name={"fade"} mode={"out-in"}>
                      {Component}
                    </Transition>
                  );
              },
            }}
          />
        </NaiveProvider>
      </NConfigProvider>
    );
  },
});
